<template>
  <div>
    <nav-bar title="商品详情"/>
    <div class="content_scroll">
      <goods-header :list="list"/>
      <goods-content :list="list" @tip-click="tipClick"/>
      <goods-info :list="list"/>
    </div>
    <div class="buy_btn_box">
      <van-button round class="btn">确认购买</van-button>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../../components/common/navbar/NavBar.vue'
import GoodsContent from './GoodsContent.vue'
import GoodsHeader from './GoodsHeader.vue'
import GoodsInfo from './GoodsInfo.vue'
import { Dialog } from 'vant'
export default {
  name: 'GoodsDetail',
  components: { NavBar, GoodsHeader, GoodsContent, GoodsInfo },
  data() {
    return {
      list: {
        gamename: '狩游世界-送GM真万充',
        gameicon: 'https://p1.277sy.com/2021/06/11/60c3063b85a6d.gif',
        client_size: '388.6',
        genre_str: '角色 • 魔幻',
        online_time: '1623628800',
        total_amount: 618,
        price: 250,
        username: 'ID5630xs21',
        area: '54',
        user_introduction: '【便宜卖,没时间玩】',
        banners: [
          require('../../../../assets/img/transaction/detail/detail_banner_01.jpeg'),
          require('../../../../assets/img/transaction/detail/detail_banner_02.jpeg'),
          require('../../../../assets/img/transaction/detail/detail_banner_03.jpeg'),
          require('../../../../assets/img/transaction/detail/detail_banner_04.jpeg'),
          require('../../../../assets/img/transaction/detail/detail_banner_05.jpeg'),
          require('../../../../assets/img/transaction/detail/detail_banner_06.jpeg'),
          require('../../../../assets/img/transaction/detail/detail_banner_07.jpeg'),
        ],

      },
    }
  },
  methods: {
    tipClick() {
      Dialog.alert({
        title: '温馨提示',
        message: '实际充值为该游戏小号所有区服的总充值!（仅供参考）',
        theme: 'round-button',
        confirmButtonText: '我知道了',
      }).then(() => {
        // on close
      })
    }
  },
}
</script>

<style lang="less" scoped>
.buy_btn_box {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10rem;
  height: 2.133333rem;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  .btn {
    width: 8rem;
    height: 1.066667rem;
    border: 0;
    background: #ff5543;
    color: #fff;
    font-size: .426667rem;
  }
}
</style>